<template>
    <!-- <ColPage menu>
       <template slot="title">
        <div class="class-title-wrap">
          <div class="class-title">
              <div class="class-title-all" :class="{'active':currentTabComponent == 'CtfQues'}" @click="changeTab('ctfQues')">主观题</div>
          </div>
          <div style="margin-left: 50px" class="class-title">
              <div class="class-title-all" :class="{'active':currentTabComponent == 'ObjectiveQues'}" @click="changeTab('ObjectiveQues')">客观题</div>
          </div>
        </div>
       </template>
       <template slot="content">
        <component v-bind:is="currentTabComponent" style='padding:0 20px;'></component>
       </template>
    </ColPage> -->
    <div class="QpageWrap" id="question">
    	<Row class="pageHeader">
    		<div class="class-title-wrap">
            <div class="class-title">
                <div class="class-title-all" :class="{'active':currentTabComponent == 'CtfQues'}" @click="changeTab('CtfQues')">主观题</div>
            </div>
            <div style="margin-left: 50px" class="class-title">
                <div class="class-title-all" :class="{'active':currentTabComponent == 'ObjectiveQues'}" @click="changeTab('ObjectiveQues')">客观题</div>
            </div>
        </div>
    	</Row>
    	<component v-bind:is="currentTabComponent" style='padding:0 20px 20px;'></component>
    </div>
</template>
<script>
  import CtfQues from './questions/ctfQuestion/ctfQuestion.vue'
  import ObjectiveQues from './questions/objectiveQuestion.vue'
  export default {
    name:'quesBank',
    data () {
      return {
        isCollapsed: false,
        currentTabComponent:"CtfQues",
      }
    },
    components:{CtfQues,ObjectiveQues},
    mounted(){
      this.currentTabComponent = 'CtfQues';
    },
    computed: {

    },
    methods: {
      changeTab (tab) {
        this.currentTabComponent = tab;
      }
    }
  }
</script>
<style scoped>
	.QpageWrap{
		/* margin:30px;
		background:#fff;
		height: calc(100vh - 60px);
		border-radius: 10px; */
    position: relative;
    /* padding: 30px; */
    height: 100%;
	}
	.pageHeader{
    position:absolute;
    /* top:31px;
    left: 34px; */
		padding:20px 20px 0 20px;
        z-index: 10;
        width: 224px;
	}
	.pageHeader .title{
		float:left;
		font-size:18px;
	}
	.class-title-wrap{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .class-title{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .class-title-all{
        font-size: 16px;
        cursor: pointer;
        color: var(--default-color-level2);
    }
    .active{
      color: var(--default-color);
        font-size: 22px;
        font-weight: 600;
    }
    .class-title-line{
        background-color: transparent;
        height: 3px;
        border-radius: 1px;
        width: 50px;
        margin: 20px 0 3px 0;
    }
    .line-active{
        background-color: var(--default-color);;
    }
</style>
